<script setup lang="ts">
import { ref } from 'vue'
import optionList from '../form/data/options'
import { ElMessage, FormInstance } from 'element-plus'

let visible = ref<boolean>(false)
let open = () => {
  visible.value = true
}

let cancel = (form: any) => {
  form.resetFields()
  visible.value = false
}
let confirm = (form: any) => {
  let validate = form.validate()
  let model = form.getFormData()

  validate((valid: any) => {
    if (valid) {
      ElMessage.success('验证成功')
      console.log(model)
    } else {
      ElMessage.error('验证失败')
    }
  })
}

let handleChange = (val: any) => {
  console.log('handleChange')
  console.log(val)
}

let handleSuccess = (val: any) => {
  console.log('handleSuccess')
  console.log(val)
}
</script>

<template>
  <el-button type="primary" size="default" @click="open">open</el-button>
  <m-model-form
    :isScroll="true"
    v-model:visible="visible"
    :options="optionList"
    title="编辑用户"
    width="50%"
    :on-change="handleChange"
    :on-success="handleSuccess"
  >
    <template #footer="{ form }">
      <el-button type="default" @click="cancel(form)">取消</el-button>
      <el-button type="primary" @click="confirm(form)">确认</el-button>
    </template>
    <template #uploadArea>
      <el-button type="primary">上传</el-button>
    </template>
    <template #uploadTip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500KB.
      </div>
    </template>
  </m-model-form>
</template>

<style lang="scss" scoped></style>
